<template>
    <el-button :icon="Plus" @click="addPath"></el-button>
    <div class="paths-list">
        <div class="path-item" v-for="(path, index) in docs_indexing_paths" :key="path">
            {{ path }} <el-button :icon="Minus" @click="removePath(index)"></el-button></div>
    </div>
</template>

<script setup lang="ts">
import { getConfigItem, updateConfigItem } from '@/requests/configs';
import { onBeforeMount, PropType, ref } from 'vue';
import { Plus, Minus } from '@element-plus/icons-vue'
import { ElMessageBox, ElNotification } from 'element-plus';

const props = defineProps({
    configItemName: {
        type: String,
        required: true
    }
})
const docs_indexing_paths = ref<string[]>([])

const addPath = () => {
    // 创建一个Element-plus的对话框，将路径复制粘贴进去
    // 然后将路径添加到docs_indexing_paths中
    ElMessageBox.prompt('请输入路径', '添加路径', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[\s\S]*/,
        inputErrorMessage: '路径不能为空',
    }).then(({ value }) => {
        docs_indexing_paths.value.push(value)
        updateConfigItem(props.configItemName, docs_indexing_paths.value)
    }).catch((err) => {
        ElNotification.error({
            title: '错误',
            message: err,
        })
    })
}

const removePath = (index: number) => {
    docs_indexing_paths.value.splice(index, 1)
    updateConfigItem(props.configItemName, docs_indexing_paths.value)
}

onBeforeMount(() => {
    getConfigItem<string[]>(props.configItemName).then((res) => {
        docs_indexing_paths.value = res
        console.log(res)
    })
})
</script>
<style>
.paths-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.path-item {
    font-size: 14px;
    color: #333;
}
</style>